<template>
	<!-- hover-class:这个标签表示鼠标移上去或者按下去的表示 -->
	<view class="box" hover-class="boxHover">
		<view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view>
	</view>
	
	<navigator url="/pages/demo2/demo2"><image src="/static/pic4.jpg" mode=""></image></navigator>
	
	
	<view>-----</view>
	
	<view>
		<navigator url="/pages/demo1/demo1" open-type="reLaunch">跳转到demo1</navigator>
	</view>
	
	<scroll-view scroll-x="true" class="scrollView">
		<view class="box">1scroll</view>
		<view class="box">1scroll</view>
		<view class="box">1scroll</view>
		<view class="box">1scroll</view>
		<view class="box">1scroll</view>
		<view class="box">1scroll</view>
		<view class="box">1scroll</view>
		<view class="box">1scroll</view>
		<view class="box">1scroll</view>
		<view class="box">1scroll</view>
	</scroll-view>
</template>

<script setup>
	
</script>

<style lang="scss">
.scrollView{
	width: 80%;
	height: 200rpx;
	border:1px solid red;
	// 强制不能自动换行
	white-space: nowrap;
	.box{
		width: 100rpx;
		height: 100rpx;
		background: green;
		// 改成行级块元素
		display: inline-block;
		margin: 5rpx;
	}
}
</style>
